<template>
	<transition name="Addaddress" >
		<div class="addAddress">
			<Header :isLeft="true" :title="title"></Header>
			<div class="viewbody">
				<div class="content">
					<FormBlock type="text" placeholder="姓名" label="联系人" v-model="addressInfo.name">	</FormBlock>
					<TabTag :tags="tagsSex" @checkTag="checkTagSex" v-model="addressInfo.sex"></TabTag>
					<FormBlock type="text" placeholder="手机号码" label="电话" v-model="addressInfo.phone"></FormBlock>
					
						<FormBlock type="text" @click.native="showSearch=true" placeholder="小区/写字楼/学校等"
						label="地址" icon="angle-right" v-model="addressInfo.address"></FormBlock>
					<FormBlock type="text" placeholder="几号楼几单元房间号" label="门牌号" icon="edit" textarea="textarea"
					v-model="addressInfo.bottom"></FormBlock>
					<div class="formblock">
						<div class="label-wrap">标签</div>
						<TabTag :tags="tags" @checkTag="checkTagHome"></TabTag>
					</div>
				</div>
				<!-- 确定按钮 -->
				<div class="form-button-wrap">
					<button class="form-button" @click="saveUser">确定</button>
					<button class="lose-button" @click="loseUser">取消</button>
				</div>
				<transition name="address" >
				<AddressSearch @addressClick="addressClick" :showSearch="showSearch" @close="showSearch=false"></AddressSearch>
				</transition>
			</div>
			
		</div>
		</transition>
	
</template>

<script>
	import { Toast } from 'mint-ui';
	import Header from '../../components/Header.vue'
	import FormBlock from '../../components/Orders/FormBlock.vue'
	import TabTag from '../../components/Orders/TabTag.vue'
	import AddressSearch from '../../components/Orders/addressSearch.vue'
	export default{
		data(){
			return {
				title:"",
				tags:["家","学校","公司"],
				tagsSex:["男","女"],
				selectTag:"",
				addressInfo:{
				
				},
				showSearch:false
			}
		},
		beforeRouteEnter(to,from,next) {
			console.log(to)
			console.log(from)
			next(vm=>{
				console.log(to)
				vm.addressInfo=to.params.addressInfo;
				vm.title=to.params.title
			})
		},
		methods:{
			loseUser(){
				this.$router.go(-1)
			},
			addressClick(item){
				this.showSearch=false
				this.addressInfo.address=item.address
			},
			checkTagHome(item){
				this.addressInfo.tag=item
			},
			checkTagSex(item){
				this.addressInfo.sex=item
			},
			saveUser(){
				console.log(this.addressInfo)
				if(!this.addressInfo.name){
					this.showMessage('请输入姓名')
					return;
				}
				if(!this.addressInfo.address){
					this.showMessage('请输入地址')
					return;
				}
				if(!this.addressInfo.phone){
					this.showMessage('请输入电话号码')
					return;
				}
				if(!/^1\d{10}$/.test(this.addressInfo.phone)){
					this.showMessage('请输入正确的电话号码')
					return;
				}
				if(this.title=="添加地址"){
					this.addAddress();
				}
				else{
					this.editAddress()
				}
			},
			editAddress(){
				this.$axios.post(`/api/user/edit_address/${localStorage.ele_Login}/${this.addressInfo._id}`,this.addressInfo).then(res=>{
					this.$router.push('/myaddress')
				})
				},
				addAddress(){
					this.$axios.post(`/api/user/add_address/${localStorage.ele_Login}`,this.addressInfo).then(res=>{
						if(!this.$store.getters.userInfo){
							this.$store.dispatch("setUserInfo",this.addressInfo)
						}
						this.$router.push('/myaddress')
					}).catch(err=>console.log(err))
				},
			showMessage(msg){
				Toast({
				  message: msg,
				  position: 'bottom',
				  duration: 2000
				});
			}
		},
		components:{
			Header,
			FormBlock,
			TabTag,
			AddressSearch
		}
	}
</script>


<style scoped>
.addAddress {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-top: 45px;
}
.viewbody {
  width: 100%;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
  background-color: #f5f5f5;
}

.content {
  padding-left: 4vw;
  background: #fff;
  font-size: 0.94rem;
}

.formblock {
  background-color: #fff;
  border-bottom: 1px solid #eee;
  display: flex;
}
.formblock .label-wrap {
  flex-basis: 17.333333vw;
  padding: 3.733333vw 0;
  line-height: 4.8vw;
  color: #333;
  font-weight: 700;
}

/* 确定按钮 */
.form-button-wrap {
  padding: 5.333333vw 4vw;
  display: flex;
}
.form-button-wrap .form-button {
  background: #00d762;
  text-align: center;
  border-radius: 0.533333vw;
  flex: 1;
  font-size: 1.1rem;
  line-height: 5.066667vw;
  color: #fff;
  padding: 3.333333vw 0;
  border: none;
  font-weight: 500;
}
.lose-button{
	background: #3e3e3e;
	text-align: center;
	border-radius: 0.533333vw;
	flex: 1;
	font-size: 1.1rem;
	line-height: 5.066667vw;
	color: #fff;
	padding: 3.333333vw 0;
	border: none;
	font-weight: 500;
}
.Addaddress-enter,
.Addaddress-leave-to{
	opacity: 0;
	/* transform: translateY(700px); */
}
.Addaddress-enter-active,
.Addaddress-leave-active{
	transition: all .5s ease;
}
.address-enter,
.address-leave-to{
	opacity: 0;
	transform: translateX(100%);
}
.address-enter-active,
.address-leave-active{
	transition: all .5s ease-in-out;
}
</style>

